<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="../dist/css/bootstrap.min.css">
  <title>两级联动选择</title>
</head>
<body class="p-3">
  <form>
    <div class="mb-3">
      <label for="single" class="form-label">申请的职位</label>
      <select class="form-select" id="single">
        <option selected>--请选择--</option>
        <option value="front">前端开发</option>
        <option value="back">后端开发</option>
      </select>
    </div>
    <div class="mb-3">
      <label for="multiple" class="form-label">擅长的技能</label>
      <select class="form-select" id="multiple" multiple>
      </select>
    </div>
  </form>
  <script src="../dist/jquery-3.6.0.min.js"></script>
  <script>
    $(function(){
      let $first = $('#single'), $second = $('#multiple');
      let data = {
        "front": ["CSS", "Bootstrap", "jQuery", "Vue.js"],
        "back": ["Java", "Python", "SQL", "C#"]
      }
      $first.change(function(){
        let val = $first.val();
        if (val) {
          $second.empty();
          $.each(data[val], function(index, value) {
            $second.append(`<option value="${value}">${value}</option>`);
          })
        }
      })
    })
  </script>
</body>
</html>